<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Hello Vue</title>

  <script src="/libs/vue.js"></script>
  <script src="/libs/vue-router.js"></script>
  <script src="/libs/axios.js"></script>
  <link href="/libs/tailwind.min.css" rel="stylesheet" />
</head>
<body>
  <div id="app" class="w-80 mx-auto">
    <h1 v-cloak class="mt-10 text-green-500 text-4xl text-center">{{icon + text}} <span class="underline">{{day}}</span>
    </h1>
    <panel title="Router">
      <div class="my-4 text-4xl text-red-400 text-center">
        <router-view></router-view>
      </div>
      <div class="flex justify-between">
        <router-link to="/">
          <t-button size="sm">Go to Home</t-button>
        </router-link>
        <router-link to="/about">
          <t-button size="sm">Go to About</t-button>
        </router-link>
      </div>
    </panel>
    <request></request>
    <request-demo></request-demo>
  </div>

  <script>
    const { createApp, defineComponent, ref } = Vue
    const { createRouter, createWebHashHistory } = VueRouter

    const Panel = defineComponent({
      props: {
        title: {
          type: String,
          required: false,
          default: '',
        },
        subTitle: {
          type: String,
          required: false,
          default: '',
        },
      },
      template: `
        <div class="flex flex-col my-4 px-8 pb-8 pt-4  bg-gray-100  rounded shadow-inner">
          <div class="flex  mb-2 border-b-2 border-green-200">
            <div class="text-xl text-green-500 ">{{title}}</div>
            <div class="flex items-end ml-2 text-sm text-green-200">{{subTitle}}</div>
          </div>
          <slot></slot>
        </div>
      `,
    })


    const TButton = defineComponent({
      props: {
        size: {
          type: String,
          required: false,
          default: 'med',
        },
      },
      data: () => ({
        sizeClasslist: '',
      }),
      methods: {
        handleSize() {
          switch (this.size) {
            case 'sm':
              this.sizeClasslist = 'px-2 py-1 text-sm'
              break
            case 'lg':
              this.sizeClasslist = 'px-8 py-4 text-2xl'
              break
            default:
              this.sizeClasslist = 'px-4 py-2 text-base'
              break
          }
        },
      },
      created() {
        this.handleSize()
      },
      template: `
          <button
            class="inline-flex items-center  border border-green-400 leading-6 font-medium rounded-md text-green-800 bg-white hover:text-green-500 focus:border-green-300 focus:ring focus:ring-green-200 focus:outline-none active:bg-green-700  transition ease-in-out duration-150"
            :class="sizeClasslist"
          ><slot></slot></button>
        `,
    })

    const Request = defineComponent({
      setup() {
        const userData = ref([])

        axios.get('/data/user.json')
          .then(function (response) {
            const { data } = response
            userData.value = data
          })


        return {
          userData
        }
      },


      template: `
        <panel title="Axios">
          <ul>
            <li v-for="item in userData">{{item.name}}</li>
          </ul>
        </panel>
      `
    })

    const RequestDemo = defineComponent({
      setup() {
        const msg = ref('')
        const list = ref([])
        const current = ref(-1)

        const get = (e) => {
          const { keyCode } = e
          if (keyCode === 38 || keyCode === 40) return // Up/Down
          if (keyCode === 13) { // Enter
            window.open(`https://www.baidu.com/s?wd=${list.value[current.value].q}`)
            msg.value = ''
          }

          axios({
            method: 'get',
            url: '/baidu/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web',
            params: {
              wd: msg.value
            }
          }).then(function (res) {
            console.log(res.data)
            list.value = res.data.g
          })
        }

        const handleKeydown = () => {
          current.value++
          if (current.value >= list.value.length) {
            current.value = 0
          }
          msg.value = list.value[current.value]?.q
        }

        const handleKeyup = () => {
          current.value--
          if (current.value < 0) {
            console.log(current.value, 'up')
            this.current = list.value.length - 1
          }
          msg.value = list.value[current.value]?.q
        }

        return {
          msg,
          list,
          current,
          get,
          handleKeydown,
          handleKeyup
        }
      },


      template: `
        <panel title="Axios 练习">
          <div class="flex justify-between">
            <input 
              class="p-1 text-sm border-gray-400 border-2"
              type="text" 
              v-model="msg"
              @keyup="get($event)"
              @keydown.down="handleKeydown"
              @keydown.up.prevent="handleKeyup"
            />
            <t-button @click="get">搜索</t-button>
          </div>
          <div>
            <ul>
              <li v-for="(item,index) in list" :class="{'text-red-500':index==current}"> {{item.q}}</li>
            </ul>  
          </div>
        </panel>
      `
    })


    const Home = { template: '<div>Home</div>' }
    const About = { template: '<div>About</div>' }

    const routes = [
      { path: '/', component: Home },
      { path: '/about', component: About },
    ]

    const router = createRouter({
      history: createWebHashHistory(),
      routes,
    })

    const app = createApp({
      components: {
        request: Request,
        "request-demo": RequestDemo
      },
      data: () => ({
        icon: '🥟',
        text: 'Vue Day',
        day: '5'
      })
    })

    app.component('t-button', TButton)
    app.component('panel', Panel)
    app.use(router)
    app.mount('#app')
  </script>
</body>
</html>
